<!DOCTYPE html>
<html>
  <head>
    <title>Hashbang</title>
    <script src="/page.js"></script>
    <base href="/hashbang/">
  </head>
  <body>
    <h1>Hashbang</h1>
    <p></p>
    <ul>
      <li><a href="./">/</a></li>
      <li><a href="#whoop">#whoop</a></li>
      <li><a href="./about">/about</a></li>
      <li><a href="./contact">/contact</a></li>
      <li><a href="./contact/me">/contact/me</a></li>
      <li><a href="./not-found?foo=bar">/not-found</a></li>
    </ul>

    <script>
      page.base('/hashbang');
      page('/', index);
      page('/about', about);
      page('/contact', contact);
      page('/contact/:contactName', contact);
      page({
        hashbang:true
      });

      function index() {
        document.querySelector('p')
          .textContent = 'viewing index';
      }

      function about() {
        document.querySelector('p')
          .textContent = 'viewing about';
      }

      function contact(ctx) {
        document.querySelector('p')
          .textContent = 'viewing contact ' + (ctx.params.contactName || '');
      }
    </script>
  </body>
</html>
